<template>
  <view>
    <view class="search-container">
      <uni-search-bar @input="input" :radius="40" cancelButton="none" placeholder="请输入搜索商品"></uni-search-bar>
    </view>

    <view class="search-list" v-if="searchList.length != 0">
      <view class="search-item" v-for="(item,index) in searchList" :key="index" @click="goToDetail(index)">
        {{item.word}}
      </view>
    </view>

    <view class="history-container" v-else>
      <view class="history-title">
        <text>搜索历史</text>
        <uni-icons type="trash" size="20" @click="clearHistory"></uni-icons>
      </view>
      <view class="history-content">
        <view class="history-item" v-for="(historyItem, historyIndex) in historyList" :key="historyIndex" @click="goToGoods(historyItem)">{{ historyItem }}</view>
      </view>
    </view>
    </view>

</template>

<script>
export default {
  data() {
    return {
      // 初始化定时器为空
      timer:null,
      // 用户输入的关键词
      keyword:'',
      // 搜索数据的数组初始化
      searchList:[],
      // 搜索历史初始化
      historyList:['水果','家具','充电器']
    };
  },
  methods:{
    input(e){
      // 每次使用先清空定时器
      clearTimeout(this.timer);
      this.timer=setTimeout(()=>{
        this.keyword=e
        // 获取搜索数据
        this.getSearchContent()
      },500)
    },
    async getSearchContent(){
      if(this.keyword.length==0){
        this.searchList=[];
        return
      }else{
        const res = await uni.$http.get('/search')
        const {data,status}=res.data;
        if(status!=200){
          alert('获取数据失败')
        }else{
          this.searchList=data

          this.saveHistory()
        }
      }
    },
    // 保存历史记录
    saveHistory() {
      let index = this.historyList.findIndex(item => {
        return item === this.keyword
      })
      if (index == -1) {
        this.historyList.unshift(this.keyword)
        // 把历史记录数组存储到本地存储
        uni.setStorageSync('kw', JSON.stringify(this.historyList))
      }
    },
    // 跳转到商品详情页
    goToDetail(id){
      uni.navigateTo({
        url:'/subpkg/goods-detail/goods-detail?goodId='+id
      })
    },
    // 清空历史记录
    clearHistory(){
      this.historyList=[];
      uni.setStorageSync('kw','[]')
    },
    // 跳转到商品列表
    goToGoods(item){
      uni.navigateTo({
        url:'/subpkg/goods-list/goods-list?query='+item
      })
    }
  },
  onLoad() {
    this.historyList=JSON.parse(uni.getStorageSync('kw')||'[]')
  },
}
</script>

<style lang="scss">
.search-container{
  height:100rpx;
  background-color: #F8392EFF;
  position: sticky;
  top:0;
  z-index:999;
}
.search-list{
  width:100%;
  background-color: #fff;
  // border-bottom:1rpx solid #C0C4CC;
  // border-top:1rpx solid #C0C4CC;
  margin-top:10rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: center;
  .search-item{
    min-width:100rpx;
    height:50rpx;
    background-color: #F0F0F0;
    border-radius: 20rpx;
    text-align: center;
    line-height: 50rpx;
    margin:8rpx;
  }

}
.history-container{
  margin-top:20rpx;
  width:100%;
  padding:0 10rpx;
  box-sizing: border-box;
  .history-title{
    width:100%;
    height:40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .history-content{
    width:100%;
    background-color: #fff;
    // border-bottom:1rpx solid #C0C4CC;
    // border-top:1rpx solid #C0C4CC;
    margin-top:10rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: center;
    .history-item{
      width:100rpx;
      height:50rpx;
      background-color: #F0F0F0;
      border-radius: 20rpx;
      text-align: center;
      line-height: 50rpx;
      margin:8rpx;
    }
  }
}
</style>
